import lessModule from "./index.module.less"
import HomePage_HeaderOperationComponent from "../../component/headerOperation"
import { $echartsData, $eventBus, $EventBus_off, $EventBus_on, $export_excel, $headerOperationBtnData, $headerOperationConditionData, $PowerSetting, $WarningLevelColor } from "../../../../common/utils"
import { useEffect, useRef, useState } from "react"
import HomePage_TableComponent from "../../component/table"
import { Divider, message } from "antd"
import HomePage_ModalComponent from "../../component/modal"
import HomePage_DetailModalComponent from "../../component/detailModal"
import { $Http } from "../../../../network"

// 主页-事件预警页面
const HomePage_EventWarningPage: React.FC = () => {
    const initParamsData = useRef<object>({})
    const paramsData = useRef<object>({})
    let [pageNo, setPageNo] = useState<number>(1)
    let [pageSize, setPageSize] = useState<number>(10)
    const [sourceData, setSourceData] = useState<object>({})
    const [isModal, setIsModal] = useState<boolean>(false)
    const [modalData, setModalData] = useState<object>({})
    const [isConfirm, setIsConfirm] = useState<boolean>(false)
    const operationData = {
        btnList: [
            $headerOperationBtnData("查询", "search", {}, true)
        ],
        conditionList: [
            $headerOperationConditionData["monitoringType"](),
            $headerOperationConditionData["singleBtn"]("预警对象"),
            $headerOperationConditionData["dataType"](),
            $headerOperationConditionData["warningLevel"],
        ],
        singleBtnKey: "deviceID",
        singleBtnValueKey: "deviceID",
        selectMonitorOperation: "监测",
        initParamsData: {
            monitoringType: "全部",
            deviceID: "",
            dataType: "全部",
            warningLevel: "全部",
        },
    }




    const columnList = [
        {
            title: '序号',
            width: 60,
            render: (text: string, record: object, idx: number) => idx + 1,
        },
        {
            title: '时间',
            minWidth: 60,
            dataIndex: 'startTime',
            render: (text: string) => text ?? "-"
        },
        {
            title: '预警对象',
            minWidth: 85,
            dataIndex: 'warningName',
            render: (text: string) => text ?? "-"
        },

        {
            title: '数据类型',
            minWidth: 85,
            dataIndex: 'dataType',
            render: (text: string) => text ?? "-"
        },
        {
            title: '预警等级',
            minWidth: 85,
            dataIndex: 'warningLevel',
            align: "center",
            render: (text: string) => <span style={{ color: $WarningLevelColor(text) }}>{text ?? "-"}</span>,
        },
        {
            title: '检测值',
            minWidth: 80,
            dataIndex: 'detectionValue',
            align: "center",
            render: (text: string, record: object) => <span style={{ color: $WarningLevelColor(record["warningLevel"]) }}>{text ?? "-"}</span>,
        },
        {
            title: '越限时间占比',
            minWidth: 120,
            dataIndex: 'ratio',
            align: "right",
            render: (text: string) => text ?? "-"
        },
        {
            title: '预警信息',
            minWidth: 85,
            dataIndex: 'warningInfo',
            render: (text: string) => text ?? "-"
        },
        {
            title: '操作',
            align: "right",
            width: 110,
            fixed: 'right',
            render: (text: string, record: object, idx: number) => <>
                <span className="homePage-tableOperationBtn" onClick={() => click_operation("see", record)}>查看</span>
                {
                    $PowerSetting()["basePower"] && <>
                        <Divider className="homePage-tableOperationDivider" type="vertical" />
                        <span className="homePage-tableOperationBtn" onClick={() => click_operation("confirm", record)}>确认</span>
                    </>
                }
            </>
        },

    ];

    const http_search = () => {
        $Http("search", { typeName: "事件预警", ...paramsData.current, pageNo, pageSize }).then((res) => {
            setSourceData({ ...res["data"] })
        })
    }
    const click_operation = (type: string, data: object) => {
        setIsModal(true)
        setModalData({ type, ...data })
        setIsConfirm(type === "confirm")

    }

    const change_pagination = (no: number, size: number) => {
        pageNo = no
        pageSize = size
        setPageNo(pageNo)
        setPageSize(pageSize)
        http_search()
    }

    const change_export = (list: Array<number>) => {
        $export_excel("事件预警", list)
    }

    const change_editModal = (value: boolean) => {
        setIsModal(false)
        value && setTimeout(() => {
            $eventBus.emit("headerOperationConditionSwitch", { source: "HomePage_DataMaintenancePage_SubstationMaintenancePage", explain: "新增/编辑成功，请关闭头部操作条件，并查询", data: { isOpen: false, isSearch: true } })
        });
    }

    // 广播函数数据
    const eventBusFuncData = {
        // 头部操作新增
        headerOperationAdd: (data: object) => {
            setModalData({ type: "add" })
            setIsModal(true)
        },
        // 头部操作初始参数
        headerOperationInitParamsData: (data: object) => {
            initParamsData.current = data["data"]["initParamsData"]
            paramsData.current = data["data"]["initParamsData"]
            http_search()
        },
        // 头部操作查询
        headerOperationSearch: (data: object) => {
            pageNo = 1
            setPageNo(pageNo)
            paramsData.current = { ...paramsData.current, ...data["data"]["paramsData"] }
            http_search()
        },
        // 头部操作条件的开关
        headerOperationConditionSwitch: (data: object) => {
            pageNo = 1
            setPageNo(pageNo)
            paramsData.current = { ...initParamsData.current }
            http_search()
        },
    }



    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])

    return (
        <div className="homePage-page">
            <HomePage_HeaderOperationComponent operationData={operationData} />
            <div className="homePage-page__main">
                <HomePage_TableComponent name="homePageEventWarningPageTable" alignCenterList={["预警等级", "检测值"]} alignRightList={["越限时间占比", "操作"]} columnList={columnList} pageNo={pageNo} pageSize={pageSize} sourceData={sourceData} change_pagination={change_pagination} change_selectedRowList={change_export} />
            </div>
            {
                isModal && <HomePage_ModalComponent width={1000} change_cancel={setIsModal} contentComponent={<HomePage_DetailModalComponent name="预警" isConfirm={isConfirm} modalData={modalData} change_cancel={change_editModal} />} />
            }
        </div>
    )
}

export default HomePage_EventWarningPage